<template>
    <div class="ctg-box">
        <HeaderTitle title="类别设置" des="设置【设备资料】、【故障库】、【规章制度】、【设备知识】的树形结构" :imgUrl="require('@/static/imgs/repository-ctg.png')"> </HeaderTitle>
        <el-card class="box-card btn-search page-search">
            <div slot="header" class="clearfix">
                <div class="btn-box">
                    <el-button
                            type="info"
                            icon="el-icon-refresh-left"
                            @click="fetchLeftParentList('init')"
                    ></el-button>
                    <el-button
                            id="gwButton"
                            type="primary"
                            style="backgroundcolor: #e1b980"
                            icon="el-icon-circle-plus-outline"
                            v-if="permissions.sys_menu_add"
                            @click="addTreeMenu"
                    >新增类目</el-button
                    >
                    <el-button
                            type="danger"
                            size="small"
                            icon="el-icon-circle-close"
                            v-if="permissions.sys_menu_del"
                            @click="delTreeCtg"
                    >删除</el-button
                    >
                </div>
            </div>
        </el-card>
        <el-row :gutter="10" style="margin-top: 10px;">
            <el-col :span="7" style="padding-right: 5px">
                <div class="grid-content grid-content1">
                    <div class="grid-content-1">
                        <IconTitle title="资料模块/资料类目" imgUrl="yunwei"> </IconTitle>
                        <el-tabs style='margin-top:10px' v-model="tabIndex" tab-position="left" @tab-click="emsKnoResCtgOptionsTabClick">
                            <el-tab-pane
                                    :label="item.label"
                                    :name="item.value"
                                    v-for="(item, index) in emsKnoResCtgOptionsTabs"
                                    :key="item.value"
                            >
                                <el-tree
                                        :data="emsKnoResCtgOptionsTree"
                                        :props="defaultProps"
                                        accordion
                                        @node-click="handleNodeClick"
                                ></el-tree>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-col>
            <el-col :span="17"
            ><div class="grid-content">
                <IconTitle title="类目编辑" imgUrl="yunwei"> </IconTitle>
                <NewForm ref="addCtgUpdate" :emsKnoResCtgOptionsTree="emsKnoResCtgOptionsTree" :ctgItem="ctgItem" :tabIndex="tabIndex" @refreshDataTree="emsKnoResCtgOptionsTabClick"></NewForm>
            </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {fetchDictList, fetchItemList, fetchCtgTree, delObj} from "@/api/ems/repository/emsknoresctg";
    import NewForm from "./emsknoresctg-form.vue";

    import { mapGetters } from "vuex";
    import IconTitle from "@/components/icon-title/index.vue";
    import HeaderTitle from "../components/header-title/index"

    export default {
        name: "emsknoresctg",
        components: {IconTitle, NewForm, HeaderTitle },
        data() {
            return {
                // 遮罩层
                loading: true,
                ctgItem: {},
                emsKnoResCtgParent: [],
                emsKnoResCtgOptionsTabs: [],
                emsKnoResCtgOptionsTree: [],
                single: true, //可以编辑了
                tabIndex:'ems_regulations',
                defaultProps: {
                    children: "children",
                    label: "name",
                }
            };
        },
        mounted() {
            this.fetchLeftParentList('init')
        },
        computed: {
            ...mapGetters(["permissions"]),
        },
        methods: {
            // 获取最左侧字典的父级
            fetchLeftParentList(param) {
                let me = this
                this.emsKnoResCtgParent = []
                fetchDictList({system: 2}).then((res) => {
                    me.emsKnoResCtgParent = res.data && res.data.data && res.data.data.records;
                    me.fetchLeftModuleList(me.emsKnoResCtgParent[0].id, param)
                });
            },
            // 获取最左侧类别
            fetchLeftModuleList(dictId,param) {
                let me = this
                this.emsKnoResCtgOptionsTabs = []
                fetchItemList({dictId: dictId}).then((res) => {
                    this.emsKnoResCtgOptionsTabs = res.data && res.data.data && res.data.data.records;
                    this.tabIndex = res.data && res.data.data && res.data.data.records && res.data.data.records[0].value
                    if(param == 'init'){
                        me.$refs.addCtgUpdate.init(false, '', me.tabIndex);
                    }
                    me.fetchKnoResCtgList()
                });
            },
            // 获取资料库树列表
            fetchKnoResCtgList() {
                // this.emsKnoResCtgOptionsTree = []
                fetchCtgTree({type: this.tabIndex}).then((res) => {
                    this.emsKnoResCtgOptionsTree = res.data && res.data.data;
                });
            },
            // 左侧模块切换
            emsKnoResCtgOptionsTabClick() {
                this.fetchKnoResCtgList();
                this.$nextTick(() => {
                    this.$refs.addCtgUpdate.init(false, undefined, this.tabIndex);
                });
            },
            // 点击分类类目树获取对应的值
            handleNodeClick(data) {
                this.ctgItem = data;
                this.editCtgTree()
            },
            clearData() {
                this.$refs.addCtgUpdate.init(false, '', this.tabIndex, this.ctgItem);
            },
            //新增
            addTreeMenu() {
                if (this.ctgItem) {
                    this.$nextTick(() => {
                        this.$refs.addCtgUpdate.init(false, this.ctgItem.id, this.ctgItem.type, this.ctgItem);
                    });
                } else {
                    this.$nextTick(() => {
                        this.$refs.addCtgUpdate.init(false, undefined, this.tabIndex);
                    });
                }
            },
            //编辑
            editCtgTree() {
                this.$nextTick(() => {
                    this.$refs.addCtgUpdate.init(true, this.ctgItem.parentId,this.tabIndex, this.ctgItem);
                });
            },
            //删除
            delTreeCtg() {
                let me = this
                let row = this.ctgItem;
                this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(function () {
                        return delObj(row.id);
                    })
                    .then(() => {
                        me.emsKnoResCtgOptionsTabClick();
                        this.$message.success("删除成功");
                    });
            }
        },
    };
</script>
<style lang="scss" scoped>
    @import "@/styles/color.scss";
    @import "@/styles/mixin.scss";
    .ctg-box {
        .grid-content {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-sizing: border-box;
            height: calc(100vh - 120px);
            box-shadow: 0px 0px 7px 0px #eff2f5;
            ::v-deep .el-card__header {
                padding: 10px 0;
                border-bottom: none;
            }
            ::v-deep .el-tabs__item {
                padding-right: 10px;
                font-size: 12px;
            }
        }
        .grid-content1 {
            overflow: auto;
        }
    }
</style>